<template>
    <div class="hotBrands">
        <div class="box">
            <div class="top">
                <div v-for="item in brandsOne" :key="item.id">
                    <img :src="item.src" alt=""><br>
                    <span>{{ item.text }}</span>
                </div>
            </div>
            <div class="bottom">
                <div v-for="item in brandsTwo" :key="item.id">
                    <img :src="item.src" alt=""><br>
                    <span>{{ item.text }}</span>
                </div>
            </div>
            <div class="cars">
                <div v-for="item in cars" :key="item.id">
                    <img :src="item.src" alt=""><br>
                    <span>{{ item.text }}</span>
                </div>
            </div>
        </div>
        <div style="margin: 20px 0;"></div>
        <div class="bottom">
            <div class="title">
                <h1>销量排行</h1>
                <span>降价排行</span>
            </div>
            <div class="ranking">
                <div class="details" v-for="item in RankingCars" :key="item.id">
                    <div class="left">
                        <img :src="item.src" alt="">
                    </div>
                    <div class="center">
                        <h1>{{ item.name }}</h1>
                        <span id="red">{{ item.price }}</span><br>
                        <span>{{ item.quantity }}</span>
                    </div>
                    <div class="right">
                        <span>{{ item.basePrice }}</span>
                    </div>
                </div>
            </div>
            <div class="lookMore">
                <span>查看更多</span>
            </div>
        </div>
        <div style="margin: 100px 0;"></div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    setup () {
        let brandsOne = [
            {
                id:1,
                src:require('../../assets/豪华品牌/奥迪.png'),
                text:'奥迪'
            },
            {
                id:2,
                src:require('../../assets/豪华品牌/奔驰.png'),
                text:'奔驰'
            },
            {
                id:3,
                src:require('../../assets/豪华品牌/宝马.png'),
                text:'宝马'
            },
            {
                id:4,
                src:require('../../assets/豪华品牌/凯迪拉克.png'),
                text:'凯迪拉克'
            },
            {
                id:5,
                src:require('../../assets/豪华品牌/雷克萨斯.png'),
                text:'雷克萨斯'
            }
        ]
        let brandsTwo = [
            {
                id:1,
                src:require('../../assets/豪华品牌/沃尔沃.png'),
                text:'沃尔沃'
            },
            {
                id:2,
                src:require('../../assets/豪华品牌/红旗.png'),
                text:'红旗'
            },
            {
                id:3,
                src:require('../../assets/豪华品牌/路虎.png'),
                text:'路虎'
            },
            {
                id:4,
                src:require('../../assets/豪华品牌/保时捷.png'),
                text:'保时捷'
            },
            {
                id:5,
                src:require('../../assets/豪华品牌/捷豹.png'),
                text:'捷豹'
            }
        ]
        let cars = [
            {
                id:1,
                src:require('../../assets/豪华品牌/红旗HS5.png'),
                text:'红旗HS5'
            },
            {
                id:2,
                src:require('../../assets/豪华品牌/奔驰E级.png'),
                text:'奔驰E级'
            },
            {
                id:3,
                src:require('../../assets/豪华品牌/奥迪Q3.png'),
                text:'奥迪Q3'
            },
            {
                id:4,
                src:require('../../assets/豪华品牌/奔驰CLC.png'),
                text:'奔驰GLC'
            }
        ]
        let RankingCars = [
            {
                id:1,
                src:require('../../assets/豪华品牌/排行1.png'),
                name:'Model Y',
                price:'25.99-35.99万',
                quantity:'52424辆',
                basePrice:'询底价'
            },
            {
                id:2,
                src:require('../../assets/豪华品牌/排行2.png'),
                name:'奔驰C级',
                price:'32.52-37.73万',
                quantity:'13417辆',
                basePrice:'询底价'
            },
            {
                id:3,
                src:require('../../assets/豪华品牌/排行3.png'),
                name:'奥迪Q5L',
                price:'39.68-48.88万',
                quantity:'10717辆',
                basePrice:'询底价'
            }
        ]
        return {
            brandsOne,
            brandsTwo,
            cars,
            RankingCars
        }
    }
})
</script>

<style scoped>

.hotBrands{
    width: 95%;
    height: 100%;
    background-color: #F6F7FB;
    padding: 18px;
}
.hotBrands .box,.hotBrands .bottom{
    width: 95%;
    background-color: white;
    border-radius: 20px;
    margin: auto;
    padding:20px;
}
.hotBrands .box .top,.hotBrands .box .bottom{
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.hotBrands .box .top img,.hotBrands .box .bottom img{
    width: 70px;
    height: 70px;
}
.hotBrands .box .top span,.hotBrands .box .bottom span,.hotBrands .box .cars span{
    font-size: 20px;
    text-align: center;
    display:inline-block;
    margin-top:20px;
}
.hotBrands .box .top div,.hotBrands .box .bottom div{
    width:15%;
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    align-items:center;
}
.hotBrands .box .cars{
    display: flex;
    justify-content: space-evenly;
}
.hotBrands .box .cars div{
    width: 25%;
    height: 150px;
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    align-items:center;
}
.hotBrands .box .cars div img{
    width: 100%;
    height: 60%;
}
.hotBrands .bottom .title{
    width: 100%;
    display: flex;
    line-height: 80px;
}
.hotBrands .bottom .title h1{
    font-size: 40px;
    margin-right: 30px;
}
.hotBrands .bottom .title span{
    color: #7A7E81;
    font-size:30px
}
.hotBrands .bottom .ranking .details{
    display: flex;
    height:150px;
    width:100%;
    border-bottom: 3px solid #EFEFEF;
    margin-bottom: 20px;
}
.hotBrands .bottom .ranking .details .left{
    width: 25%;
    height:100%;
}
.hotBrands .bottom .ranking .details .left img{
    width:100%;
    height:100%;
}
.hotBrands .bottom .ranking .details .center{
    width:48%;
    height:100%;
    font-size:20px;
    line-height:40px;
    margin-left: 20px;
}
.hotBrands .bottom .ranking .details .center h1{
    font-size:30px;
}
.hotBrands .bottom .ranking .details .center #red{
    color: #D8747D;
}
.hotBrands .bottom .ranking .details .right{
    width:25%;
    line-height:100%;
}
.hotBrands .bottom .ranking .details .right span{
    padding: 10px 30px;
    background-color:#406DEA ;
    color: white;
    font-size:20px;
    border-radius:10px;
}
.hotBrands .bottom .lookMore{
    line-height: 80px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hotBrands .bottom .lookMore span{
    color: #9B9B9D;
    font-size:20px;
}
</style>